{% extends 'base-static.html' %}
{% load staticfiles %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/layui/css/modules/layer/skin/layer.css' %}">
    <style>
        .layui-form-label {
            width: 100px;
        !important;
        }
    </style>
{% endblock %}

{% block content %}
    <section class="content-header">
        <h1>
            申请账户
        </h1>
        <ol class="breadcrumb">
            <li><a href="{% url 'system:index' %}"><i class="fa fa-dashboard"></i>首页</a></li>
            <li class="active">申请账户</li>
        </ol>
    </section>

    <section class="content">
        <div class="box-body">
            {% csrf_token %}
            <div class="col-md-8 col-md-offset-2">
                <form class="layui-form" action="" layer-filter="example" onsubmit="return false;">
                    <div class="layui-form-item">
                        <label class="layui-form-label">客户端类型</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" required lay-verify="required" disabled="" value="通用客户端"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">账户名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="account_name" required lay-verify="required|account_name"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">账户创建数量</label>
                        <div class="layui-input-block">
                            <input type="text" name="account_num" required lay-verify="required|number|account_num"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">可用线路</label>
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-btn-sm" id="select_line">选择线路</button>
                            <div class="linkLable" style="margin-top: 10px;">

                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">运营商</label>
                        <div class="layui-input-block">
                            <input type="radio" name="operator" value="移动" title="移动">
                            <input type="radio" name="operator" value="联通" title="联通" checked>
                            <input type="radio" name="operator" value="电信" title="电信" checked>
                            <input type="radio" name="operator" value="不限" title="不限" checked>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">IP 更换设置</label>
                        <div class="layui-input-block">
                            <input type="checkbox" checked="" name="ip_change" lay-skin="switch" lay-filter="switchTest"
                                   lay-text="ON|OFF">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">过期时间</label>
                        <div class="layui-input-block">
                            <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-input-block">
                            <input type="radio" name="expire_time" lay-filter="expire_time" num="1" value="1个月"
                                   title="1个月">
                            <input type="radio" name="expire_time" lay-filter="expire_time" num="3" value="3个月"
                                   title="3个月" checked>
                            <input type="radio" name="expire_time" lay-filter="expire_time" num="6" value="半年"
                                   title="半年" checked>
                        </div>
                    </div>

                    <div class="layui-form-item" style="margin-top: 90px;">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>

{% endblock %}


{% block js %}
    <script src="{% static 'plugins/layui/layui.js' %}"></script>
    <script src="{% static 'plugins/layui/css/modules/layer/layer.js' %}"></script>
    <script>
        layui.use(['form', 'laydate'], function () {
            var form = layui.form
                , laydate = layui.laydate;

            // 日期
            var date = new Date();
            var now_time = '' + date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + '';
            laydate.render({
                elem: '#date',
                min: now_time
            });

            // 表单验证
            form.verify({
                account_name: function (value) {
                    if (value.length > 10) {
                        return "账户名称不能超过10个字符";
                    }
                },
                account_num: function (value) {
                    if (parseInt(value) > 1000 || parseInt(value) === 0) {
                        return "账户数量不能超过1000或不能为0";
                    } else if (parseInt(value) < 0) {
                        return "账户数量不能为负数";
                    }
                }
            });


            // 监听单选框：过期时间
            form.on('radio(expire_time)', function (data) {
                var now_timer = new Date();
                var num = $(data.elem).attr('num');
                now_timer.setMonth(now_timer.getMonth() + parseInt(num));
                var change_time = '' + now_timer.getFullYear() + '-' + (now_timer.getMonth() + 1) + '-' + now_timer.getDate() + '';
                $('#date').val(change_time);
            });

            // 监听提交
            form.on('submit(formDemo)', function (data) {
                if ($('.linkLable').children().length === 0) {
                    layer.alert('请选择线路！', {icon: 5});
                    return false;
                }

                var params_dic = data.field;
                params_dic['lines'] = $('.linkLable').attr('lines');
                var csrftoken = Cookies.get('csrftoken');

                $.ajax({
                    url: "{% url 'system:account-create' %}",
                    type: 'post',
                    data: params_dic,
                    cache: false,
                    headers: {
                        "X-CSRFToken": csrftoken
                    },
                    success: function (resp) {
                        if (resp.code === 0) {
                            layer.alert(resp.msg, {icon: 1})
                        } else {
                            layer.alert(resp.msg, {icon: 5})
                        }
                    }
                });

            });

        });


        // 选择线路
        $('#select_line').click(function () {
            layer.open({
                type: 2,
                title: '选择线路',
                shadeClose: false,
                maxmin: false,
                area: ['700px', '460px'],
                content: "{% url 'system:account-account2line' %}",
                btn: ['确认', '取消'],
                yes: function (index, layero) {
                    var body = layer.getChildFrame('body', index);
                    var iframeWin = window[layero.find('iframe')[0]['name']];
                    var option_list = iframeWin.btnSave();  // 调用子组件方法

                    var selected_lines = selectLines();

                    // 循环生成 span 标签，并添加到 div 中
                    $.each(option_list, function (index) {
                        if (selected_lines.indexOf(option_list[index]) === -1) {
                            var span = "<span class='label label-primary style='color: white;'>" + option_list[index] + "</span>&nbsp;&nbsp;";
                            $('.linkLable').append(span);
                        }
                    });

                    $('.linkLable').attr('lines', selectLines());
                    layer.close(index);

                }
            });
        });

        // 已选择线路
        function selectLines() {
            var selected_lines = new Array();   // 已选

            $.each($('.linkLable span'), function () {
                selected_lines.push($(this).text());
            });

            return selected_lines;
        }

    </script>


{% endblock %}
